<template>
    <el-container id="container">
        <el-header id="header">
            <div class="left_box">
                <span>OA系统用户端</span>
            </div>
            <div class="right_box">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <div @click="logout">登出</div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <!--侧边栏-->
            <el-aside>
                <!--菜单导航栏 router开启路由跳转-->
                <el-col :span="12">
                    <el-menu
                            default-active="/chart"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            v-bind:router="true">
                        <el-menu-item index="/chart">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>

                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-s-management"></i>
                                <span>业务办理</span>
                            </template>
                            <el-menu-item index="/leave_key">
                                <i class="el-icon-s-grid"></i>
                                <span slot="title">请假申请</span>
                            </el-menu-item>
                            <el-menu-item index="/loan_key">
                                <i class="el-icon-s-grid"></i>
                                <span slot="title">报销申请</span>
                            </el-menu-item>
                            <el-menu-item index="/code_key">
                                <i class="el-icon-s-grid"></i>
                                <span slot="title">git仓库申请</span>
                            </el-menu-item>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-check"></i>
                                <span>个人任务</span>
                            </template>
                            <el-menu-item index="/await">
                                <i class="el-icon-share"></i>
                                <span slot="title">待办任务</span>
                            </el-menu-item>
                            <el-menu-item index="/complete">
                                <i class="el-icon-share"></i>
                                <span slot="title">已办任务</span>
                            </el-menu-item>
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-s-help"></i>
                                <span>流程实例</span>
                            </template>
                            <el-menu-item index="/running">
                                <i class="el-icon-receiving"></i>
                                <span slot="title">运行中流程</span>
                            </el-menu-item>
                            <el-menu-item index="/finish">
                                <i class="el-icon-receiving"></i>
                                <span slot="title">已结束流程</span>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-aside>
            <!--主视图-->
            <el-main>
                <!--子路由视图-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "index",
    mounted() {
        let vm = this;
        this.axios({
            url: '/myapi/user/testAdmin',
            method: 'get'
        }).then(function (response) {
            if(response.data.code===2001){
                vm.$message.error('你还未登录!');
                //后端返回的状态码为2001未登录，所以直接路由至管理员后台登录页面
                vm.$router.push("/adminLogin")
            }
        });
    },
    data(){
        return{

        }
    },
    methods:{
        logout(){
            var vm = this;
            vm.axios({
                url: '/myapi/logout',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200 && response.data.message==="注销成功"){
                    vm.$router.push("/")
                }
            });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }

}
</script>

<style scoped>
#container{
    height: 100%;
}

#header{
    display: flex;
    justify-content: space-between;
    background-color: #162332;
    color: #f8f1f1;
    text-align: center;
    line-height: 60px;
    align-items: center;
}

.left_box{
    margin-left: 15px;
    font-size: 20px;
}

.right_box{
    margin-right: 15px;
    font-size: 20px;
}

</style>
